<template>
  <div class="app-container calendar-list-container">
    <div class="apply-query">
      <el-row class="filter-query">
        <el-col><span>{{$t('buPieChart.queryCondition')}}</span></el-col>
      </el-row>
      <el-form :inline="true" :model="listQuery" label-width="120px" style="padding: 0 20px">
        <el-row style="padding-bottom: 10px">
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('buPieChart.country')}}</div>
              <dict-select v-model="listQuery.country" code="country" :clearable="true" @change="selectCountry"></dict-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">{{$t('buPieChart.company')}}</div>
              <el-select v-model="listQuery.company" :clearable="true" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in this.$store.getters.allDic.company" :key="item.value" :label="item.label" :value="item.value"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Category</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bg" :clearable="true" @change="changeBg" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in bgList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4">
            <div class="w20">
              <div class="labelName">Account</div>
              <el-select clearable multiple collapse-tags v-model="listQuery.bu" :clearable="true" @change="changeBu" :placeholder="$t('placeholder.choose')">
                <el-option v-for="item in buList" :key="item" :label="item" :value="item"></el-option>
              </el-select>
            </div>
          </el-col>
          <el-col :span="4" style="margin-top: 32px">
            <div type="primary" class="yt-btn yt-btn-ys" @click="query">{{$t('button.search')}}</div>
            <div type="primary" class="yt-btn yt-ml8" @click="reset">{{$t('button.reset')}}</div>
          </el-col>
        </el-row>
      </el-form>
    </div>

    <div class="yt-data-list">
      <div class="yt-list-title">
        <span>{{text}}</span>
        <div class="title_select">
          <el-select v-model="switchVal" @change="switchPage" :placeholder="$t('placeholder.choose')">
            <el-option v-for="item in options" :label="item.label" :value="item.value" :key="item.value">
            </el-option>
          </el-select>
        </div>
      </div>
      <!--BU各项成本饼图-->
      <bu-chart :query="queryBuCost" :listQuery="listQuery" v-if="switchVal === '1'"></bu-chart>
      <!--工务执行趋势图-->
      <monthly-works :query="queryWorkExecuteByMonthly" :listQuery="listQuery" v-if="switchVal === '2'"></monthly-works>
      <!--完工收付进度检视-->
      <completion-payment :query="queryCompletionPaymentProgress" :listQuery="listQuery" v-if="switchVal === '3'"></completion-payment>
    </div>
  </div>
</template>

<script>
  import { getDeptByBuAndCountry } from '@/api/bu/index';
  import { getBuAndBg } from '@/api/businessTarget/index';
  import dictSelect from '@/components/Dict/dictValueSelect'
  import buChart from '@/views/e-formula/pmoReport/projectRevenue/components/buPieChart'
  import monthlyWorks from '@/views/e-formula/pmoReport/projectRevenue/components/monthlyWorks'
  import completionPayment from '@/views/e-formula/pmoReport/projectRevenue/components/completionPayment'

  export default {
    data() {
      return {
        queryBuCost: 0,
        queryCompletionPaymentProgress: 0,
        queryWorkExecuteByMonthly: 0,
        listQuery: {
          bu: [],
          bg: [],
          company: '',
          country: ''
        },
        text: '',
        list: [],
        buList: [],
        bgList: [],
        options: [{ label: this.$t('buPieChart.buChart.buChart'), value: '1' }, { label: this.$t('buPieChart.monthlyWorks.monthlyWorks'), value: '2' }, { label: this.$t('buPieChart.completionPayment.completionPayment'), value: '3' }],
        chart: null,
        switchVal: '1'
      };
    },
    components: { dictSelect, buChart, monthlyWorks, completionPayment },
    mounted() {
      this.getQuery()
      this.getBg();
      this.text = this.options[this.switchVal - 1].label;
      if (this.listQuery.bu.length > 0) {
        this.query()
      }
    },
    methods: {
      getQuery() {
        const buPieChartListQuery = window.sessionStorage.getItem('buPieChartListQuery');
        if (buPieChartListQuery) {
          this.listQuery = JSON.parse(buPieChartListQuery);
        }
      },
      // 图表切换
      switchPage(val) {
        this.text = this.options[val - 1].label;
        this.query()
      },
      query() {
        // if (!this.listQuery.bu || this.listQuery.bu.length === 0) {
        //   this.$message.error(this.$t('buPieChart.message.message1'));
        //   return
        // }
        if (this.switchVal === '1') {
          this.queryBuCost += 1
        } else if (this.switchVal === '2') {
          this.queryWorkExecuteByMonthly += 1
        } else if (this.switchVal === '3') {
          this.queryCompletionPaymentProgress += 1
        }
      },
      reset() {
        this.listQuery = {
          bu: [],
          bg: [],
          company: '',
          country: ''
        }
        this.getBg()
        this.query()
      },
      setBg(country) {
        this.listQuery.bu = []
        this.listQuery.bg = []
        if (country) {
          getDeptByBuAndCountry({ country, bg: this.listQuery.bg, bu: this.listQuery.bu }).then(res => {
            this.bgList = res.data.bgList
            this.buList = res.data.buList
          })
        } else {
          this.getBg()
        }
      },
      getBg() {
        getDeptByBuAndCountry({ country: '', bg: [], bu: [] }).then(res => {
          if (res) {
            this.buList = res.data.buList
            this.bgList = res.data.bgList
          }
        })
      },
      changeBg(row) {
        if (row.length === 0) {
          this.listQuery.bg = []
        }
        getDeptByBuAndCountry({ country: this.listQuery.country, bg: row, bu: [] }).then(res => {
          this.buList = res.data.buList
        })
      },
      changeBu(row) {
        if (row.length === 0) {
          this.listQuery.bg = []
        }
        getDeptByBuAndCountry({ country: this.listQuery.country, bg: this.listQuery.bg, bu: [] }).then(res => {
          this.bgList = res.data.bgList
        })
      },
      selectCountry(val) {
        this.listQuery.bu = []
        this.listQuery.bg = ''
        // 三级联通，通过国别和bg查询bu
        if (val) {
          getBuAndBg(val, '').then(res => {
            this.bgList = res.data.bgList;
            this.buList = res.data.buList;
          });
        } else {
          this.getBu()
          this.getBg()
        }
      }
    },
    beforeDestroy() {
      window.sessionStorage.setItem('buPieChartListQuery', JSON.stringify(this.listQuery))
    }
  };
</script>
<style lang="scss" scoped>
  .title_select {
    float: right;
    padding-right: 20px;
  }

  /deep/ .yt-data-list .yt-list-title .title_select span {
    border-bottom: 0;
  }
</style>

